<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 二.复合选择器 */
        /* 1.后代选择器 */
        /* 选择儿子 */
        ol li{
            color:green;
        }
        /* 选择孙子 */
        ol a{
            color:red;
        }

        .list a{
            color:rebeccapurple;
        }
        /*2.子选择器*/
        /* 只能选子标签 */
        .list>li>a{
            font-size: 40px;
        }
        /* .cat>ul>li>a 尽量去按照页面的层次结构来写*/
        /* .cat a{
            color:red;
        } */

        /* .cat>a{
            color:red;
        } */

        /* 3.并集选择器 */
        /* 一次的选中多个标签(逗号分割) */
        /* 把苹果和香蕉都设为40px大小 */
        div,
        h3,
        ul>li{
            font-size: 40px;
        }
        
        /* 4.伪类选择器 */
        /* 这是一个范围很大的概念,实际上伪类选择器有很多种,只是介绍一些比较常用的 */
        /* 4.1 链接伪类选择器,和a标签搭配使用,根据a标签的状态来选择 */
        /* a标签的几种状态::
         1.未被访问过:link
         2.已经被访问过:visited
         3.鼠标悬停:hover
         4.活动链接(点下去之后,没松手):active
         带:的就是"伪类选择器" */
        a{
            font-size: 30px ;
        }
        a:link{
            /* 未被选择,默认为黑色 */
            color: black;
        }
        a:visited{
            /* 访问之后,为绿色 */
            color: green;
        }
        /* 最常用的两个 */
        a:hover{
            /* 鼠标悬停为红色 */
            color: red;
        }
        a:active{
            /* 鼠标点击,未松手为蓝色 */
            color: blue;
        }

        /* 4.2 force伪类选择器 */
        /* 表示获取焦点的时候被选中 */
        /* 尤其是针对输入框,就需要知道哪个输入框获取到了焦点 */
        input:focus{
            color:blue;
        } 
    </style>

</head> 
<body>
    <ul>
        <li>Liyuu</li>
        <li>Liyuu</li>
        <li>Liyuu</li>
    </ul>
    <ol class="list">
        <li>唐可可</li>
        <li>唐可可</li>
        <li>
            <a href="#">唐可可</a>
       </li>
    </ol>
    <!-- <div class="cat">
           <ul>
               <li><a href="#">小猫</a></li>
               <li><a href="#">小猫</a></li>
               <li><a href="#">小猫</a></li>
           </ul>
       </div> -->

    <!-- <div class="cat">
       <a href="#">小猫</a>
       <ul>
           <li><a href="#">小狗</a></li>
           <li><a href="#">小狗</a></li>
       </ul>
    </div> -->
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>橙子</li>
        <li>火龙果</li>
    </ul>

    <a href="https://www.bilibili.com/video/BV1ML4y1q7oX?from=search&seid=8478024965823841690&spm_id_from=333.337.0.0">Liella</a>

    <div>
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>